<!DOCTYPE html>D
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>

<!--
document 对象是 DOM（文档对象模型）中非常重要的对象，它代表 HTML 或 XML 文档本身。
通过 document 对象，您可以访问和操作网页上的元素和结构。

用Window对象获取Document对象，用Document对象获取Element对象
1. getElementById()：根据id属性值获取，返回单个Element对象
2. getElementsByTagName()：根据标签名称获取，返回Element对象数组
3. getElementsByName()：根据name属性值获取，返回Element对象数组
4. getElementsByClassName()：根据class属性值获取，返回Element对象数组
-->
<body>

    <img id="light" src="./imgs/off.gif"> <br>

    <div class="cls">传智教育</div>
    <br>
    <div class="cls">黑马程序员</div>
    <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

</body>

<script>
    // 1. 根据 id 属性值获取上面的 img 元素对象，返回单个对象
    let img = window.document.getElementById("light");
    let img = document.getElementById("light");
    alert(img);

    //2. 根据标签名称获取所有的 div 元素对象
    // 返回一个数组，数组中存储的是 div 元素对象
    let divs = document.getElementsByTagName("div");
    alert(divs.length);
    //遍历数组
    for(let i=0;i<divs.length;i++){
        alert(divs[i]);
    }

    // 3. 获取所有的满足 name = 'hobby' 条件的元素对象
    //    getElementsByName：根据name属性值获取，返回Element对象数组
    let hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }

    //4. 获取所有的满足 class='cls' 条件的元素对象
    // getElementsByClassName：根据class属性值获取，返回Element对象数组
    let clss = document.getElementsByClassName("cls");
    for(let i=0;i<clss.length;i++){
        alert(clss[i]);
    }

</script>


</html>